<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web简历</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css">
</head>
<body>

<nav>
    <div class="logo">
        <a href="#">
            <img src="img/logo.jpg" alt="">
            <div class="logo-inner">
                <div class="logo-active">
                    <p>Hou</p>
                    <hr>
                    <p>个人简历</p>
                </div>
                <div class="logo-none">
                    <p>Resume</p>
                    <hr>
                    <p>前段工程师</p>
                </div>
            </div>
        </a>
    </div>
    <button class="bbtn">按钮</button>
    <ul class="list">
        <li><a href="">首页</a></li>
        <li><a href="">关于我</a></li>
        <li><a href="">心路历程</a></li>
        <li><a href="">专业技能</a></li>
        <li><a href="">我的作品</a></li>
        <li><a href="">联系我</a></li>
    </ul>
</nav>

<div class="aew swiper-container">
    <div class="swiper-wrapper">

 <header class="swiper-slide">
    <div class="demo">
        <h1>我只管努力，上天自有安排</h1>
        <p>一个代码偏执狂</p>
        <p>享受从无到有的成就感</p>
        <p>路漫漫其修远兮 吾将上下而求索</p>
    </div>
</header>
<div class="swiper-slide H-two">
            <div class="demo">
                <h2>About ME</h2>
                <div class="box">
                    <div class="img">
                        <img src="img/yuan.jpg" alt="">
                    </div>
                    <div class="txt">
                        <p>姓 名：侯常山</p>
                        <p>年 龄：21</p>
                        <p>性 别: 男</p>
                        <p>职 位：前端工程师</p>
                        <p>专 业: 软件工程系(Java)</p>
                        <p>毕业学校：泊头师范学院</p>
                    </div>
                </div>
            </div>
        </div>
<div class="swiper-slide H-three">
            <div class="qiehuan">
                <div class="left">
                    <p onclick="o()"><span>1</span>简单的自我介绍</p>
                    <p onclick="t()"><span>2</span>为什么想做前端工程师？</p>
                    <p onclick="tt()"><span>3</span>为什么不从事本专业？</p>
                    <p onclick="fo()"><span>4</span>优势和不足</p>
                    <p onclick="fi()"><span>5</span>我的想法是？</p>
                </div>
                <div class="right">
                    <div class="xinxi-1 xinxi" id="Zero">
                        <p>你好，我叫侯常山</p>
                        <p>来自秦皇岛市一个小山庄</p>
                        <p>爱好广泛，喜欢听音乐和旅行</p>
                        <p>...</p>
                        <p>莫听穿林打叶声，何妨吟啸且徐行。</p>
                        <p>竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。</p>
                    </div>
                    <div class="xinxi-2 xinxi" id="two">
                        <p>可能就像这一句情话</p>
                        <p>You are the css to my html.</p>
                        <p>“我的生活索然无味，</p>
                        <p>直到遇见了你。”</p>
                        <p>纯属兴趣爱好,看好这个行业而学</p>
                    </div>
                    <div class="xinxi-3 xinxi" id="three">
                        <p>工作，本应该是一件使人快乐的事</p>
                        <p>但，好像...只有编程我才能感到真正的快乐！！！</p>
                        <p>误入深坑，却爱的无法自拔</p>
                    </div>
                    <div class="xinxi-4 xinxi" id="four">
                        <p>我的不足是：不想加班</p>
                        <p>放假就想老老实实躺会</p>
                        <p>我的优势是：主动加班</p>
                        <p>在赶项目等阶段还是老实本分的敲</p>
                        <p>如果你不介意</p>
                        <p>那就选我吧！</p>
                    </div>
                    <div class="xinxi-5 xinxi" id="flve">
                        <p>有人说 ฅ^•ﻌ•^ฅ</p>
                        <p>IT是个青春饭</p>
                        <p>但我 (ฅ´ω`ฅ)</p>
                        <p>要到敲不动为止</p>
                        <p>。</p>
                        <p>。</p>
                        <p>当然，得先有一个你@我offer！</p>
                    </div>
                </div>
            </div>
        </div>
<div class="swiper-slide bnbm">
            <div class="domine-Cshang beijingtu-g">
                <div class="da-div">
                    <h2>专业技能</h2>
                    <div class="buju-hou">
                        <div class="slbj-hou">
                            <h3>HTML</h3>
                            <div class="yincang-hou">
                                <p>1.前端基本功</p>
                                <p>2.熟练HTML熟悉盒模型和各类布局方式、能够根据设计图实现页面布局和交互效果</p>
                                <p>3.熟悉PC端、移动端、响应式网页开发</p>
                            </div>
                        </div>
                        <div class="slbj-hou">
                            <h3>CSS</h3>
                            <div class="yincang-hou">
                                <p>1.熟练css</p>
                                <p>2.熟悉H5C3新特新</p>
                                <p>3.使用BootStrap MUI等</p>
                            </div>
                        </div>
                        <div class="slbj-hou">
                            <h3>JavaScript</h3>
                            <div class="yincang-hou">
                                <p>1.熟练JavaScript</p>
                                <p>2.熟练jQuery</p>
                                <p>3.擅长改用各种插件</p>
                                <p>4.熟练ajax</p>
                            </div>
                        </div>
                        <div class="slbj-hou">
                            <h3>目前</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<div class="aa swiper-slide">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide hcs-wsx">
                        <div class="hcs-qaz">
                            <h4>我的作品</h4>
                            <div class="hou-buju">
                                <div class="hou-elbj">
                                    <img src="img/1-1.png" alt="">
                                    <img src="img/1-2.png" alt="">
                                    <img src="img/1-3.png" alt="">
                                </div>
                                <div class="hou-elbj">
                                    <h5>尚阳弘星一体板</h5>
                                    <p><span>技术实现:</span>HTML5、CSS3\jQuery、javascript</p>
                                    <p><span>项目描述：</span>尚阳弘星浙江新材料股份有限公司是一家集研发制造、</p>
                                    <p>设计安装、销售服务为一体的高新技术企业...</p>
                                    <p><span>实现技术：</span></p>
                                    <p>根据产品需求分析并给出前端结构解决方案并完成效果实现</p>
                                    <p>利用div+css等将页面实现，高度还原设计图</p>
                                    <p>使用jQuery完成页面动态交互</p>
                                    <a href=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide hcs-wsx">
                        <div class="hcs-qaz">
                            <h4>我的作品</h4>
                            <div class="hou-buju">
                                <div class="hou-elbj">
                                    <img src="img/2-1.png" alt="">
                                    <img src="img/2-2.png" alt="">
                                    <img src="img/2-3.png" alt="">
                                </div>
                                <div class="hou-elbj">
                                    <h5>歌珊装饰</h5>
                                    <p><span>技术实现：</span>HTML/CSS、jQuery</p>
                                    <p><span>项目描述：</span>杭州歌珊装饰是一家集装饰设计、</p>
                                    <p>施工、家具、软装等为一体的健康全屋定制家居企业...</p>
                                    <p><span>实现技术：</span></p>
                                    <p>通过采用div+css样式布局排版</p>
                                    <p>使用H5C3、jQuery和插件等工具完成页面轮播图等其他效果</p>
                                    <a href=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide hcs-wsx">
                        <div class="hcs-qaz">
                            <h4>我的作品</h4>
                            <div class="hou-buju">
                                <div class="hou-elbj">
                                    <img src="img/store-1.jpg" alt="">
                                    <img src="img/store-2.jpg" alt="">
                                    <img src="img/store-3.jpg" alt="">
                                </div>
                                <div class="hou-elbj">
                                    <h5>玛雅布业</h5>
                                    <p><span>技术实现：</span>HTML/CSS、 HTML5/CSS3、js、jQuery等</p>
                                    <p><span>项目描述：</span>浙江玛雅布业有限公司-主要提供沙发布外贸... </p>
                                    <p>是集研发、生产、销售于一体的当代沙发面料制造实业公司</p>
                                    <p><span>实现技术：</span></p>
                                    <p>根据产品需求分析并给出最优的网页前端结构解决方案并完成效果实现</p>
                                    <p>利用css+html等将页面实现，高度还原设计图</p>
                                    <p>用js、jQuery实现特效制作</p>
                                    <a href=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide hcs-wsx">
                        <div class="hcs-qaz">
                            <h4>我的作品</h4>
                            <div class="hou-buju">
                                <div class="hou-elbj"></div>
                                <div class="hou-elbj">
                                    <h5>爱拓生物(公众号)</h5>
                                    <p><span>技术实现：</span>HTML/CSS、 HTML5/CSS3、jQuery等</p>
                                    <p><span>项目描述：</span>"爱拓生物"是一家专业从事健康预防科学产品、科研技术开发、</p>
                                    <p>医疗器械、健康管理、生产及销售服务等为一体的机构</p>
                                    <p><span>实现技术：</span>初次接触微信公众号开发</p>
                                    <p>利用css+html等将页面实现，高度还原设计图</p>
                                    <p>利用ajax实现数据互交</p>
                                    <a href=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>
<header class="swiper-slide" id="qwere">
            <div class="demo hcs-db">
                    <div class="hcs-edc">
                        <h4>联系我</h4>
                    </div>
                <div class="hcs-plm">
                    <div class="hou-tgb">
                        <img src="img/qqewm.jpg" alt="">
                    </div>
                    <div class="hou-tgb">
                        <p><span>电话：</span>15232332513</p>
                        <p><span>邮箱：</span>1939617768@qq.com</p>
                        <p><span>QQ:</span>2944192742</p>
                        <a href=""></a>
                    </div>
                </div>
            </div>
        </header>




    </div>
    <div class="swiper-pagination"></div>
</div>


<script src="js/www.js"></script>
<script src="js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.aew.swiper-container', {
        direction: 'vertical',
        followFinger: false,
        speed: 800,
        mousewheel: true,
        pagination: {
            el: '.swiper-pagination',
        },
        on: {
            init: function (swiper) {
                slide = this.slides.eq(0);
                slide.addClass('ani-slide');
            },
            transitionStart: function () {
                for (i = 0; i < this.slides.length; i++) {
                    slide = this.slides.eq(i);
                    slide.removeClass('ani-slide');
                }
            },
            transitionEnd: function () {
                slide = this.slides.eq(this.activeIndex);
                slide.addClass('ani-slide');

            },
        }
    });

    var swiper = new Swiper('.aa .swiper-container', {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '">' + '</span>';
            },
        },
    });

</script>
</body>
</html>